import CardChart, { ChartData, ChartType } from '@/components/CardChart';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { Button } from 'antd';
import { useEffect, useState, useRef } from 'react';
import {showProvince} from "@/services/api/contact";
import ReactECharts from 'echarts-for-react'
import CHINA_JSON from './全国.json'; //引入全国地图
import * as echarts from 'echarts';

echarts.registerMap('map', CHINA_JSON); //注册全国地图
const ShowPronvinceVOList = await showProvince();
const provinceList: string[] = ShowPronvinceVOList?.map(showPronvinceVO => showPronvinceVO.province)
const provinceNumList: string[] = ShowPronvinceVOList?.map(showPronvinceVO => showPronvinceVO.provinceNumber)
const provinceData = ShowPronvinceVOList?.map(showPronvinceVO => ({name:showPronvinceVO.province,value: showPronvinceVO.provinceNumber}))


const regionCounts = [
  { region: '华北', count: 0 },
  { region: '东北', count: 0 },
  { region: '华东', count: 0 },
  { region: '华中', count: 0 },
  { region: '华南', count: 0 },
  { region: '西南', count: 0 },
  { region: '西北', count: 0 },
];
for (const province of ShowPronvinceVOList) {
  let region = '';
  switch (province.province) {
    case '北京':
    case '天津':
    case '河北':
    case '山西':
    case '内蒙古':
      region = '华北';
      break;
    case '辽宁':
    case '吉林':
    case '黑龙江':
      region = '东北';
      break;
    case '上海':
    case '江苏':
    case '浙江':
    case '安徽':
    case '福建':
    case '江西':
    case '山东':
    case '台湾':
      region = '华东';
      break;
    case '河南':
    case '湖北':
    case '湖南':
      region = '华中';
      break;
    case '广东':
    case '广西':
    case '海南':
      region = '华南';
      break;
    case '重庆':
    case '四川':
    case '贵州':
    case '云南':
    case '西藏':
      region = '西南';
      break;
    case '陕西':
    case '甘肃':
    case '青海':
    case '宁夏':
    case '新疆':
      region = '西北';
      break;
    default:
      continue;
  }
  const matchingRegion = regionCounts.find(r => r.region === region);
  if (matchingRegion) {
    matchingRegion.count += province.provinceNumber;
  }
}
const regionCountsData: string[] = regionCounts?.map(r => r.count)
const Option1 = {
  title: {
    text: "柱状图"
  },
    xAxis: {
        type: 'category',
        data: provinceList
    },
    yAxis: {
        type: 'value'
    },
    series: 
        {
        data: provinceNumList,
        type: 'bar',
        }
        };

    const Option2 = {
      title: {
        text: "漏斗图"
      },
    legend: {
      orient: "vertical",
      left: "left",
      top: 'center', 
      bottom: 'center',
      data: provinceList
    },
    series: [{
        name: "漏斗图",
        type: "funnel",
        data: provinceData
    }]
    }

    const Option3 = {
      title: {
        text: "饼图",
      },
    legend: {
        orient: "vertical",
        left: "left",
        top: 'center', 
        bottom: 'center',
        data: provinceList
    },
    series: [{
        type: "pie",
        data: provinceData
    }]
    }

    const Option4 = {
      title: {
        text: "雷达图"
      },
      tooltip: {},
      radar: {
        indicator: [{
          name: "华北",
          max: 20
        }, {
          name: "东北",
          max: 20
        }, {
          name: "华东",
          max: 20
        }, {
          name: "华中",
          max: 20
        }, {
          name: "华南",
          max: 20
        }, {
          name: "西南",
          max: 20
        },{
          name: "西北",
          max: 20
        }]
      },
      series: [{
        name: "各区域联系人数",
        type: "radar",
        data: [{
          value: regionCountsData,
        }]
      }]
    }

    provinceData.sort(function (a, b) {
      return a.value - b.value;
    });
    const mapOption = {
      tooltip: {
        // 提示框
        trigger: 'item', // 触发类型
        formatter: function (params) {//该函数接收一个参数 params，包含了当前触发的数据信息，这里利用模板字符串将省份的名称和人数展示出来。
          const { data } = params;
          return `${params?.name}<br/>联系人数: ${data?.value || 0}`;
        },
      },
      visualMap: {//视觉映射组件，用于将数据映射到视觉元素上。
        left: 'right',//组件离容器左侧的距离
        min: 0,
        max: 10,
        inRange: {
          // prettier-ignore
          color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        },
        text: ['High', 'Low'],
        calculable: true//是否显示手柄控制器，允许用户通过拖拽手柄调整选中范围。这里为 true
      },
      series: [
        {
          id: 'population',//系列的唯一标识符,与barOption使用相同id，即可丝滑切换
          type: 'map',
          roam: true,//是否开启平移和缩放
          map: 'map',//地图类型，这里为 'map'，表示中国地图
          scaleLimit: {
            //滚轮缩放的极限控制
            min: 0.8, //缩放最小大小
            max: 2, //缩放最大大小
          },
          label: {
            // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
            show: true, //显示省市名称
            position: [1, 100], // 相对的百分比
            fontSize: 14,
            color: '#000',
            offset: [2, 0], // 是否对文字进行偏移。默认不偏移。例如：`[30, 40]` 表示文字在横向上偏移 `30`，纵向上偏移 `40`。
            align: 'left', // 文字水平对齐方式，默认自动。
          },
          animationDurationUpdate: 1000,//更新动画的时长，这里为 1000 毫秒。
          universalTransition: true,//是否开启普适过渡动画
          data: provinceData,
          zoom: 1, // 当前视角的缩放比例
        }
      ]
    }

    const barOption = {
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        axisLabel: {
          rotate: 30
        },
        data: provinceData.map(function (item) {
          return item.name;
        })
      },
      animationDurationUpdate: 1000,
      series: {
        type: 'bar',
        id: 'population',
        data: provinceData.map(function (item) {
          return item.value;
        }),
        universalTransition: true
      }
    };
    
    

export default () => {
  const [option, setOption] = useState<Option>(Option1);
  const [option1, setOption1] = useState<Option1>(mapOption);
  return (
    <PageContainer>
      <ProCard
        title="图表"
        extra={[
          <Button onClick={() => setOption(Option1)}>柱状图</Button>,
          <Button onClick={() => setOption(Option2)}>漏斗图</Button>,
          <Button onClick={() => setOption(Option3)}>饼图</Button>,
          <Button onClick={() => setOption(Option4)}>雷达图</Button>,
        ]}
      >
        <ReactECharts
            option={option}
            style={{height:'700px',width:'100%'}}
            notMerge={true}
            className='echarts-for-echarts'/>
      </ProCard>
      {/* <div style={{ display: 'flex'}}>
        <div style={{ flex: 1 }}>
          <ReactECharts option={Option1} style={{height:'500px',width:'100%'}} />
        </div>
        <div style={{ flex: 1 }}>
          <ReactECharts option={Option2} style={{height:'500px',width:'100%'}}/>
        </div>
      </div>
      <div style={{ display: 'flex'}}>
        <div style={{ flex: 1 }}>
          <ReactECharts option={Option3} style={{height:'500px',width:'100%'}} />
        </div>
        <div style={{ flex: 1 }}>
          <ReactECharts option={Option4} style={{height:'500px',width:'100%'}}/>
        </div>
      </div> */}

{/* 地图plus柱状图 */}

    {/* setInterval(function () {
      setOption1(option1 === mapOption ? barOption : mapOption)
    }, 2000); */}
    <Button onClick={() => setOption1(option1 === mapOption ? barOption : mapOption)}>切换地图/条形图</Button>
    <div style={{ width: "1500px", height: "1000px" }}>
      <ReactECharts
        option={option1}
        style={{ width: '100%', height: '100%' }}
        notMerge={true}
      />
    </div>
    
    </PageContainer>
  );
};
